import { createRoot } from "react-dom/client";
import { useState, useRef } from "react";
import "./style.css";
import { HawlAudio } from "./components/HowlAudio";
import { ContextAudio } from "./components/ContextAudio";
import { HtmlAudio } from "./components/HtmlAudio";
import eruda from "eruda";

eruda.init({
  useShadowDom: true,
  autoScale: true,
  defaults: {
    displaySize: 50,
    transparency: 0.9,
    theme: 'Monokai Pro'
  }
});

const App = () => {
  const [activeComponent, setActiveComponent] = useState<'howl' | 'context' | 'html'>('howl');
  const currentComponentRef = useRef<{ destroy: () => void } | null>(null);

  const handleComponentChange = (component: 'howl' | 'context' | 'html') => {
    // 销毁当前组件的音频
    if (currentComponentRef.current) {
      console.log('🧹 销毁当前组件音频');
      currentComponentRef.current.destroy();
      currentComponentRef.current = null;
    }
    
    // 切换组件
    setActiveComponent(component);
  };

  const handleDestroy = () => {
    console.log('🔧 组件销毁回调触发');
  };

  return (
    <div style={{ position: 'relative', minHeight: '100vh' }}>
      {/* 左上角切换面板 */}
      <div style={{
        position: 'fixed',
        top: '20px',
        left: '20px',
        zIndex: 1000,
        backgroundColor: 'rgba(245, 245, 245, 0.95)',
        padding: '15px',
        borderRadius: '8px',
        border: '1px solid #ddd',
        boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
        display: 'flex',
        flexDirection: 'column',
        gap: '8px',
        minWidth: '200px'
      }}>
        <h4 style={{ margin: '0 0 10px 0', color: '#333', fontSize: '14px' }}>音频组件切换</h4>
        
        <button
          onClick={() => handleComponentChange('howl')}
          style={{
            padding: '8px 12px',
            fontSize: '12px',
            backgroundColor: activeComponent === 'howl' ? '#4CAF50' : '#e0e0e0',
            color: activeComponent === 'howl' ? 'white' : '#333',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
            transition: 'all 0.3s ease'
          }}
        >
          Howl.js
        </button>
        
        <button
          onClick={() => handleComponentChange('context')}
          style={{
            padding: '8px 12px',
            fontSize: '12px',
            backgroundColor: activeComponent === 'context' ? '#4CAF50' : '#e0e0e0',
            color: activeComponent === 'context' ? 'white' : '#333',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
            transition: 'all 0.3s ease'
          }}
        >
          Web Audio API
        </button>

        <button
          onClick={() => handleComponentChange('html')}
          style={{
            padding: '8px 12px',
            fontSize: '12px',
            backgroundColor: activeComponent === 'html' ? '#4CAF50' : '#e0e0e0',
            color: activeComponent === 'html' ? 'white' : '#333',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
            transition: 'all 0.3s ease'
          }}
        >
          HTML5 Audio
        </button>
        
        <div style={{ marginTop: '10px', fontSize: '10px', color: '#666' }}>
          <p>当前: {activeComponent === 'howl' ? 'Howl.js' : activeComponent === 'context' ? 'Web Audio API' : 'HTML5 Audio'}</p>
        </div>
      </div>
      
      {/* 内容区域 */}
      <div style={{ padding: '20px', paddingTop: '80px' }}>
        {activeComponent === 'howl' && (
          <HawlAudio 
            onDestroy={handleDestroy}
            ref={(ref) => {
              if (ref) {
                currentComponentRef.current = { destroy: () => ref.destroy?.() };
              }
            }}
          />
        )}
        {activeComponent === 'context' && (
          <ContextAudio 
            onDestroy={handleDestroy}
            ref={(ref) => {
              if (ref) {
                currentComponentRef.current = { destroy: () => ref.destroy?.() };
              }
            }}
          />
        )}
        {activeComponent === 'html' && (
          <HtmlAudio 
            onDestroy={handleDestroy}
            ref={(ref) => {
              if (ref) {
                currentComponentRef.current = { destroy: () => ref.destroy?.() };
              }
            }}
          />
        )}
      </div>
    </div>
  );
};

createRoot(document.getElementById("app")!).render(<App />);
